<template>
	<div class="noticeList">
		<div class='my-header'></div>
		<div class="listmain">
			<PullRefreshList 
                v-model:refreshing="refreshing" 
                v-model:loading="loading"
                v-model:finished="finished" 
                v-model:list="list" 
                @load="onLoad"
            >
				<van-cell 
                    v-for="(item, index) in list" 
                    :key="index" 
                    :title='`逝者：${item.sh_ex1} &nbsp; &nbsp; 承办人：${item.sh_ex5}` '
                    :label='`日期：${item.sh_dat2.split(" ")[0]}  时间段：${item.sh_ex45}`'
                    is-link 
                    center 
                    @click="routerPush(item)" 
                >
                    <template #value>
                        <van-button 
                            type="primary" 
                            size="mini"
                            @click.stop="cancel(item)"
                        >
                            取消预约
                        </van-button>
                    </template>
                </van-cell>
			</PullRefreshList>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { markRaw, reactive, ref, toRaw, onMounted, onBeforeMount } from 'vue'
    import type { Ref } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
    import { showDialog, showConfirmDialog, showLoadingToast, showSuccessToast, closeToast } from 'vant'
	import PullRefreshList from '@/components/PullRefreshList.vue'
    import { yuyuelistApi, cancelYuyueInfoApi } from '@/apis'

    const router = useRouter()
    const route = useRoute()

	import { useStore } from '@/store'
    const store = useStore()

	const list: Ref<Array<any>> = ref([])
	const loading: Ref<boolean> = ref(false)
	const finished: Ref<boolean> = ref(false)
	const refreshing: Ref<boolean> = ref(true)
	const onLoad = async(callback) => {
		// if (refreshing.value) {
		// 	list.value = [];
		// 	refreshing.value = false;
		// }
		let val = await yuyuelistApi({
            openid: store.openid
        })
		list.value.push(...val.data)
        callback(true)
		// loading.value = false;
		// finished.value = true;
	}
	const routerPush = (val) => {
		// 后面看是跳转还是什么
		console.log(val)
        // if (val.stype == '守灵') {
        //     router.push(`/wakeAppointment?sh_id=${val.id}`)
        // } else if (val.stype == '告别') {
        //     router.push(`/farewellAppointment?sh_id=${val.id}`)
        // } else if (val.stype == '接运') {
        //     router.push(`/cremationAppointment?sh_id=${val.id}`)
        // }
	}
    const cancel = (val) => {
        showConfirmDialog({
            title: '提示',
            message: '确定取消预约？'
        }).then(() => {
			if (val.sh_ex42 == 'Y') {
				showDialog({
					title: '提示',
					message: '已通过审核，请联系管理员取消！'
				})
			} else {
				showLoadingToast({
					message: '加载中...',
					forbidClick: true,
					duration: 0
				});
				cancelYuyueInfoApi({
					sh_id: val.sh_id
				}).then(async res => {
					closeToast();
					showSuccessToast({
						message: res[0].msg,
					});
					list.value = []
					loading.value = true
					finished.value = false
					let val = await yuyuelistApi({
						openid: store.openid
					})
					list.value.push(...val.data)
					loading.value = false
					finished.value = true
				}).catch(err => {
					closeToast();
				})
			}
            
        }).catch(err => {
			showConfirmDialog({
				title: '提示',
				message: '取消预约失败！'
			})
        })
        
        console.log(val)
    }
</script>

<style lang="scss" scoped>
	.noticeList {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
        background: url(@/assets/bg/bg11.png);
        background-size: 100% 100%;
	}
        // background: url(@/assets/policy/policybg-car.png) no-repeat;
    .my-header {
        display: flex;
        justify-content: center;
        // background: url(@/assets/policy/policybg.png) no-repeat;
        // background-size: 100% 90%;
        margin-bottom: 10px;
        border-radius: 10px;
    }
    
    .my-header::after {
        content: '';
        width: 100%;
        height: 185px;
        // margin-top: 20px;
        // background: url(@/assets/banner/gmjs_bg.png);
        background: url(@/assets/policy/policybg-car.png) no-repeat;
        background-size: 110% 110%;
        background-position: 30% 50%;
        border-radius: 5px;
    }
	// .my-header {
	// 	display: flex;
	// 	justify-content: center;
	// 	background: url(@/assets/policy/policybg.png) no-repeat;
	// 	background-size: 100% 90%;
	// 	margin-bottom: 10px;
	// 	border-radius: 10px;
	// }

	// .my-header::after {
	// 	content: '';
	// 	width: 95%;
	// 	height: 185px;
	// 	margin-top: 20px;
	// 	background: url(@/assets/banner/gmjs_bg.png);
	// 	background-size: 100% 100%;
	// 	border-radius: 5px;
	// }

	.my-main {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* justify-content: center; */
	}

	.maindiv {
		width: 90%;
		/* border: 1px solid #2C3E50; */
		box-shadow: 0px 0px 5px 5px #e3eee9;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 25px;
	}

	.maindivfont1 {
		color: #333333;
		font-size: 12pt;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.maindivfont2 {
		color: #666666;
		font-size: 10pt;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		margin-bottom: 30px;
	}

	.listmain {
		flex: 1;
		overflow: auto;
	}
</style>